<script lang="ts" module>
    export const StepsContextKey = Symbol("StepsContextKey");
</script>

<script lang="ts">
    import { setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { StepsProps } from "./Steps";
    import Step from "./Step.svelte";
    import { useStyle } from "../utils/useStyle";

    const { current = $bindable(), ...props }: StepsProps = $props();

    const classList = $derived(
        useClassList(props, "cm-steps", {
            [`cm-steps-${props.size}`]: props.size,
            "cm-steps-vertical": props.dir === "v",
        }),
    );

    const styles = $derived(
        useStyle(props, {
            "--cui-steps-finished-color": props.finishedColor,
            "--cui-steps-finished-background": props.finishedBackground,
            "--cui-steps-process-color": props.processColor,
            "--cui-steps-process-background": props.processBackground,
        }),
    );

    setContext(StepsContextKey, {
        getCurrent: () => current,
    });
</script>

<div class={classList} style={styles}>
    {#each props.data as item, index}
        <Step {...item} index={index + 1}></Step>
    {/each}
</div>
